<script setup>
import { NButton } from 'naive-ui'
import { withModifiers } from 'vue'

const testData = [
  { title: 'Wonderwall', length: '5', key: 0 },
  { title: 'Don\'t Look Back in Anger', length: '6', key: 1 },
  { title: 'Champagne Supernova', length: '3', key: 2 },
]

const badgeValue = ref(0)

const tableLoading = ref(false)
const tableColumns = ref([
  {
    type: 'selection',
  },
  {
    title: '序号',
    key: 'index',
    render: (_, index) => {
      return `${index + 1}`
    },
    resizable: true,
  },
  {
    title: 'Title',
    key: 'title',
    resizable: true,
    sorter: (rowA, rowB) => rowA.title.length - rowB.title.length,
  },
  {
    title: 'Length',
    key: 'length',
    resizable: true,
    sorter: (rowA, rowB) => rowA.length - rowB.length,
  },
  {
    title: 'Action',
    key: 'actions',
    render(row, index) {
      return h(
        NButton,
        {
          tertiary: true,
          size: 'small',
          onClick: withModifiers(() => play(row, index), ['stop']),
        },
        { default: () => 'Play' },
      )
    },
    resizable: true,
  },
])
const tableData = ref(testData)
const checkedRowKeys = ref([])

const isTableData = ref(true)

const tableSizeValue = ref('medium')

const tableSizeOptions = [
  {
    label: '小杯',
    value: 'small',
  },
  {
    label: '中杯',
    value: 'medium',
  },
  {
    label: '大杯',
    value: 'large',
  },
]

const page = ref(1)
const pageSize = ref(10)

function play({ title, length }, index) {
  window.$message.info(`index: ${index},title: ${title},length: ${length}`)
}

function handlePage(v) {
  page.value = v
}

function handlePageSize(v) {
  pageSize.value = v
}

function handleLoading() {
  tableLoading.value = true

  setTimeout(() => {
    tableLoading.value = false
  }, 2000)
}

function handleUpdateValue(v) {
  tableData.value = v ? testData : []
}

function rowProps(row) {
  return {
    onClick: (e) => {
      // TODO 🧐 已知2.37.0版本中 row-prop和selection 有冲突 点击checkbox会触发row-props点击
      if (e.target.className !== 'n-checkbox-box__border') {
        const { key } = row

        const index = checkedRowKeys.value.indexOf(key)

        if (!~index)
          checkedRowKeys.value.push(key)
        else
          checkedRowKeys.value.splice(index, 1)
      }
    },
  }
}
</script>

<template>
  <div flex="~">
    <n-card size="small" title="中等">
      <template #header-extra>
        <n-badge :max="99" :value="badgeValue" show-zero>
          <NButton size="small" tertiary @click="badgeValue = Math.min(100, badgeValue + 1)">
            功德
          </NButton>
        </n-badge>
      </template>

      <n-alert :bordered="false" closable title="提示" type="info">
        <template #icon>
          🧐
        </template>
        自适应表格
      </n-alert>

      <n-flex align="center">
        <NButton :loading="tableLoading" size="small" @click="handleLoading">
          Loading
        </NButton>
        <n-switch v-model:value="isTableData" :round="false" @update:value="handleUpdateValue">
          <template #checked>
            有数据
          </template>
          <template #unchecked>
            没数据
          </template>
        </n-switch>
        <n-select v-model:value="tableSizeValue" :options="tableSizeOptions" placeholder="表格大小" size="small" w="120px" />
      </n-flex>

      <n-data-table
        v-model:checked-row-keys="checkedRowKeys"
        :bordered="false"
        :columns="tableColumns"
        :data="tableData"
        :loading="tableLoading"
        :row-props="rowProps"
        :size="tableSizeValue"
        :style="{ flex: 1 }"
        flex-height
      />

      <n-pagination
        :default-page="page" :default-page-size="pageSize"
        :item-count="tableData.length" :page-sizes="[10, 20, 30, 40]" show-quick-jumper show-size-picker justify-center
        @update:page="handlePage" @update:page-size="handlePageSize"
      >
        <template #prefix="{ itemCount }">
          共 {{ itemCount }} 项
        </template>
      </n-pagination>
    </n-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.n-card) {
  @apply flex-1;

  .n-card__content {
    @apply flex flex-col gap-y-8px;
  }
}
</style>
